<template>
  <div>
    <mt-header title="登录" class="header" fixed>
      <router-link to="" slot="left">
        <mt-button icon="back" @click="$router.go(-1)">返回</mt-button>
      </router-link>
    </mt-header>

    <div class="box">
      <img src="@/assets/img/user.png" alt="" class="touxiang" />
      <div>
        <span>账号：</span
        ><input
          type="text"
          placeholder="请输入账号"
          v-model="userName"
          id="userName"
          @blur="userNameBlur"
        />
        <div id="userNameId"></div>
      </div>
      <div>
        <span>密码：</span
        ><input type="password" placeholder="请输入密码" v-model="pwd" />
      </div>
      <div class="btn">
        <mt-button
          :disabled="userName == '' && pwd == ''"
          type="primary"
          @click="checkForm()"
          >登录</mt-button
        >
        <mt-button type="primary" @click="register()" plain>注册</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      userName: "",
      pwd: "",
    };
  },
  methods: {
    ...mapMutations(["updateUser"]),
    ...mapMutations(["updateUser1"]),
    register() {
      this.$router.push({ path: "/register" });
    },
    userNameBlur() {
      let userName = document.getElementById("userName");
      let userNameId = document.getElementById("userNameId");
      // let userName=document.getElementById('userName')
      // let userName=document.getElementById('userName')
      // let userName=document.getElementById('userName')
      let reg = /^\w{6,9}$/;
      // 用户名为空时
      if (userName.value.trim() == "") {
        // console.log("空了");
        userNameId.className = "error_prompt";
        userNameId.innerHTML = "用户名不能为空";
        return false;
      }
      // // 用户名不合法的情况
      if (reg.test(userName.value.trim()) == false) {
        userNameId.className = "import_prompt";
        userNameId.innerHTML = "不是6~9位字母";
        return false;
      }
      // 输入了正确的格式
      userNameId.className = "ok_prompt";
      userNameId.innerHTML = "用户名格式输入正确";
      return true;
    },
    checkForm() {
      let params = `username=${this.userName}&password=${this.pwd}`;
      this.axios.post("/login", params).then((res) => {
        // console.log(res);
        console.log(res.data.code);
        if (res.data.code == 200) {
          this.updateUser(this.userName); //更新给vuex
          this.updateUser1(this.pwd); //更新给vuex

          this.$router.push({ path: "/" });
          Toast({
            message: "登陆成功",
            position: "bottom",
            duration: 5000,
          });
        } else {
          Toast({
            message: "用户名或密码错误",
            position: "bottom",
            duration: 5000,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  width: 100%;
  top: 0px;
}
.box {
  width: 80vw;
  height: 50vh;
  margin: auto;
  margin-top: 25vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.box > div {
  margin: auto;
}
.btn_ture {
  background-color: #26a2ff;
  color: white;
}
.btn_false {
  background-color: lightgray;
  pointer-events: none;
}
button {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
}
.touxiang {
  background-color: lightgray;
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50px;
}
.error_prompt {
  // border: 1px solid #f30;
  // background-color: #fff2e5;
  color: red;
  line-height: 20px;
  padding: 2px 5px 0 5px;
  // width: 140px;
  // margin: auto;
  // background-color: #26a2ff;
  text-align: center;
}
// 当文本输入正确时
.ok_prompt {
  // border: 1px solid #01be00;
  // background-color: #e6fee4;
  color: aqua;
  padding: 2px 5px 0 5px;
  line-height: 20px;
  text-align: center;
  // margin: auto;
  // width: 160px;
}
.import_prompt {
  // border: solid 2px #ffcd00;
  // background-color: #ffffda;
  color: yellow;
  padding: 0 5px;
  line-height: 20px;
  text-align: center;
  // margin: auto;
  // width: 160px;
}
</style>